<template>
  <div class="order">
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px" size="mini">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="订单编号">
              <el-input v-model="form.orderSn" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="订单类型">
              <!-- orderType (integer, optional): 订单类型：0->正常订单；1->秒杀订单 , -->
              <el-select v-model="form.orderType" style="width:100%;" placeholder="订单类型" clearable>
                <el-option

                  label="正常订单"
                  :value="0"
                />
                <el-option

                  label="秒杀订单"
                  :value="0"
                />
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="6" :offset="0">
            <el-form-item label="支付方式">
              <!-- payType (integer, optional): 支付方式：0->未支付；1->支付宝；2->微信 , -->
              <el-select v-model="form.payType" style="width:100%;" placeholder="支付方式" clearable>
                <el-option
                  label="未支付"
                  :value="0"
                />
                <el-option
                  label="支付宝"
                  :value="0"
                />
                <el-option
                  label="微信"
                  :value="0"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6" :offset="0">
            <el-form-item label="订单状态">
              <!-- status (integer, optional): 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->退货；5->无效订单 -->
              <el-select v-model="form.status" style="width:100%;" placeholder="订单状态" clearable>
                <el-option
                  v-for="item in orderStatus"
                  :key="item.id"
                  :label="item.text"
                  :value="item.value"
                />

              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <el-form-item>
              <el-button type="primary">搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

    </el-card>

    <el-card shadow="never" class="margin-30">

      <el-table :data="orderList" border stripe>
        <el-table-column
          type="index"
          label="#"
          width="50"
          align="center"
        />
        <el-table-column
          prop="orderSn"
          label="订单编号"

          align="center"
        />
        <el-table-column

          label="支付方式"

          align="center"
        >
          <template slot-scope="scope">
            <!-- payType (integer, optional): 支付方式：0->未支付；1->支付宝；2->微信 , -->
            <el-tag v-if="scope.row.payType==1" type="success" size="mini" effect="dark">支付宝</el-tag>
            <el-tag v-if="scope.row.payType==2" type="success" size="mini" effect="dark">
              <svg-icon icon-class="wechat" class-name="svg-icon" />
            </el-tag>
            <el-tag v-if="scope.row.payType==0" type="info" size="mini" effect="dark">未支付</el-tag>

          </template>
        </el-table-column>
        <el-table-column

          label="订单状态"

          align="center"
        >
          <template slot-scope="scope">
            <!-- status (integer, optional): 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->退货；5->无效订单 -->
            <el-tag v-if="scope.row.status==0" type="danger" size="mini" effect="plain">待付款</el-tag>
            <el-tag v-if="scope.row.status==1" type="warning" size="mini" effect="plain">待发货</el-tag>
            <el-tag v-if="scope.row.status==2" type="info" size="mini" effect="plain">已发货</el-tag>
            <el-tag v-if="scope.row.status==3" type="success" size="mini" effect="plain">已完成</el-tag>
            <el-tag v-if="scope.row.status==4" size="mini" effect="plain">退货</el-tag>
            <el-tag v-if="scope.row.status==5" size="mini" effect="plain">无效订单</el-tag>

          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="添加时间"

          align="center"
        />
        <el-table-column
          prop="memberUsername"
          label="用户账号"

          align="center"
        />
        <el-table-column

          label="订单类型"

          align="center"
        >
          <template>
            <!-- orderType (integer, optional): 订单类型：0->正常订单；1->秒杀订单 , -->
            <!-- <el-tag v-if="scope.row.orderType==0" type="danger" size="mini" effect="plain">正常订单</el-tag>
            <el-tag v-if="scope.row.orderType==1" type="warning" size="mini" effect="plain">秒杀订单</el-tag> -->
            <el-tag type="success" size="mini" effect="plain">正常订单</el-tag>

          </template>
        </el-table-column>
        <el-table-column
          prop="note"
          label="备注"

          align="center"
        />
        <el-table-column
          label="操作"

          align="center"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-view" @click="goOrderDetail(scope.row.id)">查看订单</el-button>

          </template>
        </el-table-column>
      </el-table>

    </el-card>

  </div>
</template>
<script>
import {
  findOrdersByPage as findOrdersByPageApi
} from '@/api/order/order'
import mix from '@/mixins'
export default {
  name: 'Order',
  mixins: [mix],
  data() {
    return {
      orderList: [],
      form: {},
      // status (integer, optional): 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->退货；5->无效订单
      orderStatus: [
        {
          id: 0,
          text: '待付款',
          value: 0
        },
        {
          id: 1,
          text: '待发货',
          value: 1
        },
        {
          id: 2,
          text: '已发货',
          value: 2
        },
        {
          id: 3,
          text: '已完成',
          value: 3
        },
        {
          id: 4,
          text: '退货',
          value: 4
        },
        {
          id: 5,
          text: '无效订单',
          value: 5
        }

      ]
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getOrderList()
  },
  mounted() {
  },
  methods: {
    goOrderDetail(id) {
      this.$router.push({ name: 'OrderDetail', params: { id }})
    },
    async getOrderList() {
      const res = await findOrdersByPageApi(this.paginationObj.start, this.paginationObj.limit, this.form)
      const { success, data, message } = res
      if (success) {
        this.orderList = data.rows
        this.paginationObj.total = data.total
      } else {
        this.$message.error(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.order{
  .svg-icon{
    // width: 200px;
    // height: 200px;
    // color: red;
    // font-size: 50px;
  }
}
</style>
